Skip to main content

Upsell

Platinum pages of type upsell are pages that can be used to offer more apps for the user to subscribe to.

For example, if the user subscribes to Fabulous, we can offer them to subscribe to Clarify too by using a Clarify upsell page.

Supported Upsell Pages​

Currently only one upsell page is supported for Fabulous that can be used to offer Clarify:

https://start.thefabulous-staging.co/offers/platinum/fabulous/upsell/control

The default planCode on that page is tm-subs-quarterly-14-discount-29 but it can be overriden by passing a different plan to the params:

https://start.thefabulous-staging.co/offers/platinum/fabulous/upsell/control?plan=tm-subs-quarterly-normal-1-thirtynine

Using the page as an onboarding step​

The upsell page can be also used as part of the onboarding, and to use all the default values, you can use this step:

{
    "stepId": "upsell",
    "type": "platinum",
    "platinumType": "upsell",
    "platinumPath": "control"
}

[!IMPORTANT] Only control is currently supported as the default platinumPath.

Supported Localization​

The page supports, en, de, es, pt, and fr.

  • If the page is used in an upsell flow as a standalone page, it’ll check for the user’s broswer’s language.
  • If it’s used as an onboarding step, the language will fallback to the onboarding languange.

The default JSON file used in Fabulous​

Clarify Upsell page
{
  "platinumType": "upsell",
  "planCode": "tm-subs-quarterly-14-discount-29",
  "logoUrl": "https://c.thefab.co/web-onboarding/time/img_logo_clarify_desktop.png",
  "backgroundImage": "https://c.thefab.co/web-onboarding/time/upsell-gradient-bg.svg",
  "heroWaveyImageUrl": "https://c.thefab.co/web-onboarding/time/wave-shape1.svg",
  "skipCta": {
    "text": "",
    "textColor": "#130A7E"
  },
  "title": "",
  "subtitle": "",
  "titleColor": "#251C93",
  "subtitleColor": "#251C93",
  "ctaText": "",
  "ctaTextColor": "white",
  "ctaBackgroundColor": "#FF7121",
  "ctaHoverBackgroundColor": "#E65300",
  "bottomViewBackgroundColor": "white",
  "sectionWaveyDesktop": "https://c.thefab.co/web-onboarding/time/wave2.svg",
  "sectionWaveyMobile": "https://c.thefab.co/web-onboarding/time/wave-shape2.svg",
  "planBoxDetails": {
    "title": "",
    "titleColor": "#251C93",
    "backgroundColor": "#FFF",
    "textColor": "#251C93",
    "subtitleColor": "#6262DD",
    "borderColor": "#FFE1D0",
    "secondaryColor": "#FF7121",
    "description": "",
    "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/plan-timeline.png"
  },
  "termsCheckbox": {
    "text": "",
    "textColor": "#3425B8",
    "activeBackgroundColor": "#FF7121",
    "checkboxBorderColor": "transparent",
    "checkboxBackgroundColor": "white"
  },
  "terms": {
    "linkColor": "#3425B8",
    "textColor": "#3425B8"
  },
  "features": [
    {
      "preTitle": "",
      "title": "",
      "text": "",
      "titleColor": "#251C93",
      "backgroundColor": "#FFF",
      "textColor": "#3425B8",
      "preTitleColor": "#FF7121",
      "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/feature-icon-1.png",
      "boxShadow": "rgba(44, 32, 187, 0.08)"
    },
    {
      "preTitle": "",
      "text": "",
      "titleColor": "#251C93",
      "title": "",
      "backgroundColor": "#FFF",
      "textColor": "#3425B8",
      "preTitleColor": "#FF7121",
      "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/feature-icon-2.png",
      "boxShadow": "rgba(44, 32, 187, 0.08)"
    },
    {
      "preTitle": "",
      "title": "",
      "text": "",
      "titleColor": "#251C93",
      "backgroundColor": "#FFF",
      "textColor": "#3425B8",
      "preTitleColor": "#FF7121",
      "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/feature-icon-3.png",
      "boxShadow": "rgba(44, 32, 187, 0.08)"
    }
  ],
  "featuresIllustration": {
    "title": "",
    "subtitle": "",
    "listTitle": "",
    "ctaText": "",
    "textColor": "#3327C2",
    "titleColor": "#251C93",
    "ctaBackgroundColor": "#3425B8",
    "ctaTextColor": "white",
    "ctaHoverBackgroundColor": "#2A1E93",
    "imageUrl": "https://c.thefab.co/web-onboarding/time/clarify_upsell_visual.png",
    "list": [
      {
        "text": "",
        "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/feature-icon-1.svg"
      },
      {
        "text": "",
        "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/feature-icon-2.svg"
      },
      {
        "text": "",
        "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/feature-icon-3.svg"
      },
      {
        "text": "",
        "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/feature-icon-4.svg"
      },
      {
        "text": "",
        "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/feature-icon-5.svg"
      }
    ]
  },
  "carousel": {
    "title": "",
    "subtitle": "",
    "titleColor": "#251C93",
    "subtitleColor": "#3327C2",
    "list": {
      "textColor": "#3425B8",
      "arrowsColor": "#FF8F18",
      "activeDotColor": "#FF7121",
      "inactiveDotColor": "white",
      "items": [
        {
          "text": "",
          "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/afredo-tinoco.png",
          "footerText": "Alfredo Tinoco"
        },
        {
          "text": "",
          "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/sabine-rush.png",
          "footerText": "Sabine Rush"
        },
        {
          "text": "",
          "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/kayla-jeffers.png",
          "footerText": "Kayla Jeffers"
        },
        {
          "text": "",
          "iconUrl": "https://c.thefab.co/web-onboarding/time/icons/emma-royal.png",
          "footerText": "Emma Royal"
        }
      ]
    }
  },
  "footer": {
    "text": "",
    "textColor": "#251C93",
    "ctaText": "",
    "ctaTextColor": "#FFFFFF",
    "ctaBackgroundColor": "#3425B8",
    "ctaHoverBackgroundColor": "#2A1E93",
    "imageUrl": "https://c.thefab.co/web-onboarding/time/upsell-footer-img.png"
  }
}